<script setup lang="ts">

import PieChart from "@/components/PieChart.vue";

const panels = ref([
  {
    title: '用户量',
    unit: '人',
    unitColor: 'primary',
    value: 2000,
    total: 12000,
  }, {
    title: '访问量',
    unit: '人',
    unitColor: 'success',
    value: 2000,
    total: 12000,
  }, {
    title: '下载量',
    unit: '次',
    unitColor: 'info',
    value: 2000,
    total: 12000,
  }, {
    title: '使用量',
    unit: '次',
    unitColor: 'info',
    value: 2000,
    total: 12000,
  },
])
</script>

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in panels" :key="index">
        <el-card shadow="hover" class="border-0">
          <!-- card title -->
          <template #header>
            <div flex flex-col gap-y-1.5 p-2>
              <h3 font-semibold tracking-tight text-xl>
                {{ item.title }}
              </h3>
            </div>
          </template>

          <!-- card body -->
          <div p-3 pt-0 flex items-center justify-between>
            <span text-xl>
              <CountTo :value="item.value"/>
            </span>
            <svg v-if="item.title === '用户量'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                 viewBox="0 0 24 24">
              <g fill="none" stroke="black" stroke-dasharray="28" stroke-dashoffset="28" stroke-linecap="round"
                 stroke-linejoin="round" stroke-width="2">
                <path d="M4 21v-1c0 -3.31 2.69 -6 6 -6h4c3.31 0 6 2.69 6 6v1">
                  <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="28;0"/>
                </path>
                <path d="M12 11c-2.21 0 -4 -1.79 -4 -4c0 -2.21 1.79 -4 4 -4c2.21 0 4 1.79 4 4c0 2.21 -1.79 4 -4 4Z">
                  <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.4s" dur="0.4s" values="28;0"/>
                </path>
              </g>
            </svg>

            <svg v-if="item.title === '访问量'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                 viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="0" fill="currentColor">
                <animate fill="freeze" attributeName="r" dur="0.2s" values="0;3"/>
              </circle>
              <path fill="black" fill-opacity="0" stroke="black" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="2"
                    d="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z">
                <animate fill="freeze" attributeName="d" dur="0.5s"
                         values="M4 12c1.38 -0.77 4.42 -1.3 8 -1.3c3.58 0 6.62 0.53 8 1.3c-1.38 0.77 -4.42 1.3 -8 1.3c-3.58 0 -6.62 -0.53 -8 -1.3Z;M2 12c1.72 -3.83 5.53 -6.5 10 -6.5c4.47 0 8.28 2.67 10 6.5c-1.72 3.83 -5.53 6.5 -10 6.5c-4.47 0 -8.28 -2.67 -10 -6.5Z"/>
                <animate fill="freeze" attributeName="fill-opacity" begin="0.5s" dur="0.15s" values="0;0.3"/>
              </path>
            </svg>

            <svg v-if="item.title === '下载量'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                 viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                <path stroke-dasharray="20" stroke-dashoffset="20" d="M12 4h2v6h2.5l-4.5 4.5M12 4h-2v6h-2.5l4.5 4.5">
                  <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="20;0"/>
                </path>
                <path stroke-dasharray="14" stroke-dashoffset="14" d="M6 19h12">
                  <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="14;0"/>
                </path>
              </g>
            </svg>

            <svg v-if="item.title === '使用量'" xmlns="http://www.w3.org/2000/svg" width="2em" height="2em"
                 viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                <path stroke-dasharray="48" stroke-dashoffset="48" d="M6 14l11 -11l4 4l-11 11l-4 -4Z">
                  <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="48;0"/>
                </path>
                <path fill="currentColor" fill-opacity="0" stroke-dasharray="20" stroke-dashoffset="20" stroke-width="1"
                      d="M9 17l-2.5 2.5h-4l4.5 -4.5Z">
                  <animate fill="freeze" attributeName="fill-opacity" begin="0.9s" dur="0.5s" values="0;1"/>
                  <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="20;0"/>
                </path>
              </g>
            </svg>
          </div>

          <div flex items-center p-3 pt-0 justify-between>
            <span>总{{ item.title }}</span>
            <span>{{ item.total }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" mt-5 border-0 w-full>
      <!--渐变堆积面积图-->
      <GradientStackedAreaChart/>
    </el-card>

    <el-row :gutter="20" mt-5>

      <el-col :span="8" :offset="0">
        <el-card shadow="never">
          <!--AQI雷达图-->
          <AQIRadarChart/>
        </el-card>
      </el-col>

      <el-col :span="8" :offset="0">
        <el-card shadow="never">
          <!--饼图-->
          <PieChart/>
        </el-card>
      </el-col>

      <el-col :span="8" :offset="0">
        <el-card shadow="never">
          <!--漏斗图-->
          <FunnelChart/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<style scoped>

</style>